<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
      // 定义二维数组:
      var arr = new Array(4);
      arr[0] = new Array("哈尔滨","齐齐哈尔","大庆","佳木斯");
      arr[1] = new Array("长春市","吉林市","四平市","通化市");
      arr[2] = new Array("沈阳市","锦州市","大连市","铁岭市");
      arr[3] = new Array("郑州市","洛阳市","安阳市","南阳市");
    </script>
  <script>
    function changePro(flag) {
      let val = flag.value;
      let cityArr = arr[val];
      let city;
      for (let i = 0; i < cityArr.length; i++) {
        city += "<option>"+cityArr[i]+"</option>"
      }
      document.getElementById("city").innerHTML=city;
    }
  </script>
</head>
<body>
        <form action="#" method="post">
          <!-- TODO:给省份下拉选添加改变事件 -->
          籍贯:
          <select name="pro" onchange="changePro(this)">
            <option>请选择</option>
            <option value="0">黑龙江</option>
            <option value="1">吉林</option>
            <option value="2">辽宁</option>
            <option value="3">河南</option>
          </select> 省
          <select id="city">
             <option >-请选择-</option>
          </select> 市
        </form>
</body>
</html>